<template>
  <div class="baseinfo">
    <div class="info">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>登记信息</span>
        </div>
        <div class="p">
          <span>单位名称:</span>
          <span @click="gotoedit(regInfo,contactInfo)" style="color:#337ab7; cursor: pointer;">{{regInfo.orgName}}</span>
        </div>
        <div class="p">
          <span>成立日期:</span>
          <span>{{regInfo.orgEstablishDate}}</span>
        </div>
        <div class="p">
          <span>法定代表人:</span>
          <span>{{regInfo.orgLegalPerson}}</span>
        </div>
        <div class="p">
          <span>组织机构代码:</span>
          <span>{{regInfo.orgOrganizationCode}}</span>
        </div>
        <div class="p">
          <span>营业执照登记机构:</span>
          <span>{{regInfo.orgBlrOrg}}</span>
        </div>
        <div class="p">
          <span>24小时联系电话:</span>
          <span>{{regInfo.rescuePhone}}</span>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>联系信息</span>
        </div>
        <div class="p">
          <span>手 机:</span>
          <span>{{contactInfo.orgTel}}</span>
        </div>
        <div class="p">
          <span>座 机:</span>
          <span>{{contactInfo.orgLandline}}</span>
        </div>
        <div class="p">
          <span>传 真:</span>
          <span>{{contactInfo.orgFax}}</span>
        </div>
        <div class="p">
          <span>机要员:</span>
          <span>{{contactInfo.nickName}}</span>
        </div>
        <div class="p">
          <span>DT(登录名):</span>
          <span>{{contactInfo.userName}}</span>
        </div>
        <div class="p">
          <span>单位地址:</span>
          <span>{{contactInfo.orgAddr}}</span>
        </div>
      </el-card>
    </div>
    <div class="main">
      <el-card class="big-card">
        <div slot="header" class="clearfix">
          <span>主要负责人</span>
        </div>
        <div class="big-box">
          <div class="first">
            <div class="box">
              <img :src="util.fileIP+keyWorkerInfo.generalManager.url" alt="" v-if="keyWorkerInfo.generalManager.photo">
              <img src="@/assets/peo.jpg" alt="" v-else>
              <div class="info">
                <p>职位:<span class="job">管理者代表(总经理)</span></p>
                <p>姓名:<span>{{keyWorkerInfo.generalManager.name}}</span></p>
                <p>手机:<span>{{keyWorkerInfo.generalManager.phone}}</span></p>
                <p>身份证号:<span>{{keyWorkerInfo.generalManager.idCard}}</span></p>
                <el-button size="mini" type="warning" @click="showDailog(keyWorkerInfo.generalManager,'管理者代表')">编辑</el-button>
              </div>
            </div>
            <div class="box">
              <img :src="util.fileIP+keyWorkerInfo.maintCharge.url" alt="" v-if="keyWorkerInfo.maintCharge.photo">
              <img src="@/assets/peo.jpg" alt="" v-else>
              <div class="info">
                <p>职位:<span class="job">维保负责人</span></p>
                <p>姓名:<span>{{keyWorkerInfo.maintCharge.name}}</span></p>
                <p>手机:<span>{{keyWorkerInfo.maintCharge.phone}}</span></p>
                <p>身份证号:<span>{{keyWorkerInfo.maintCharge.idCard}}</span></p>
                <el-button size="mini" type="warning" @click="showDailog(keyWorkerInfo.maintCharge,'维保负责人')">编辑</el-button>
              </div>
            </div>
            <div class="box">
              <img :src="util.fileIP+keyWorkerInfo.qualityCharge.url" alt="" v-if="keyWorkerInfo.qualityCharge.photo">
              <img src="@/assets/peo.jpg" alt="" v-else>
              <div class="info">
                <p>职位:<span class="job">质保负责人</span></p>
                <p>姓名:<span>{{keyWorkerInfo.qualityCharge.name}}</span></p>
                <p>手机:<span>{{keyWorkerInfo.qualityCharge.phone}}</span></p>
                <p>身份证号:<span>{{keyWorkerInfo.qualityCharge.idCard}}</span></p>
                <el-button size="mini" type="warning" @click="showDailog(keyWorkerInfo.qualityCharge,'质保负责人')">编辑</el-button>
              </div>
            </div>
          </div>
          <div class="second">
            <div class="box">
              <img :src="util.fileIP+keyWorkerInfo.techCharge.url" alt="" v-if="keyWorkerInfo.techCharge.photo">
              <img src="@/assets/peo.jpg" alt="" v-else>
              <div class="info">
                <p>职位:<span class="job">技术负责人</span></p>
                <p>姓名:<span>{{keyWorkerInfo.techCharge.name}}</span></p>
                <p>手机:<span>{{keyWorkerInfo.techCharge.phone}}</span></p>
                <p>身份证号:<span>{{keyWorkerInfo.techCharge.idCard}}</span></p>
                <el-button size="mini" type="warning" @click="showDailog(keyWorkerInfo.techCharge,'技术负责人')">编辑</el-button>
              </div>
            </div>
            <div class="box">
              <img :src="util.fileIP+keyWorkerInfo.installCharge.url" alt="" v-if="keyWorkerInfo.installCharge.photo">
              <img src="@/assets/peo.jpg" alt="" v-else>
              <div class="info">
                <p>职位:<span class="job">施工(安装改造)负责人</span></p>
                <p>姓名:<span>{{keyWorkerInfo.installCharge.name}}</span></p>
                <p>手机:<span>{{keyWorkerInfo.installCharge.phone}}</span></p>
                <p>身份证号:<span>{{keyWorkerInfo.installCharge.idCard}}</span></p>
                <el-button size="mini" type="warning" @click="showDailog(keyWorkerInfo.installCharge,'施工负责人')">编辑</el-button>
              </div>
            </div>
            <div class="box">
              <img :src="util.fileIP+keyWorkerInfo.notifyCharge.url" alt="" v-if="keyWorkerInfo.notifyCharge.photo">
              <img src="@/assets/peo.jpg" alt="" v-else>
              <div class="info">
                <p>职位:<span class="job">开工告示指定人</span></p>
                <p>姓名:<span>{{keyWorkerInfo.notifyCharge.name}}</span></p>
                <p>手机:<span>{{keyWorkerInfo.notifyCharge.phone}}</span></p>
                <p>身份证号:<span>{{keyWorkerInfo.notifyCharge.idCard}}</span></p>
                <el-button size="mini" type="warning" @click="showDailog(keyWorkerInfo.notifyCharge,'开工告示指定人')">编辑</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog title="修改人员信息" :visible.sync="dialogFormVisible" width="50%" :before-close="onCancle">
      <div>
        <el-form :model="form" size="mini">
          <div style="display:flex">
            <div class="box_left">
              <el-form-item label="人员类型" label-width="100px">
                <el-input v-model="form.personType" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="姓名" label-width="100px">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" label-width="100px">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系电话(手机号)" label-width="100px">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
            </div>
            <div class="box_right">
              <el-form-item label-width="100px" label="上传照片">
                <el-upload accept=".jpg,.jpeg,.png,.gif,.bmp" action="#" :limit="1" list-type="picture-card" :auto-upload="false" :on-exceed="handleExceedone"
                  :on-change="uploadFlie" :file-list="fileList" :class="fileList.length > 0 ? 'delUploadColor' : ''">
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span> -->
                      <span class="el-upload-list__item-delete" @click="removeFile(file)">
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="getSave" type="primary" size="mini">保 存</el-button>
        <el-button @click="onCancle" size="mini">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改公司信息" :visible.sync="dialogFormVisible1" width="50%">
      <div>
        <el-form :model="formInline" size="mini" label-width="150px">
          <div style="display:flex">
            <div class="box_left">
              <el-form-item label="组织机构代码">
                <el-input v-model="formInline.orgOrganizationCode" disabled></el-input>
              </el-form-item>
              <el-form-item label="法人代表：">
                <el-input v-model="formInline.orgLegalPerson" disabled></el-input>
              </el-form-item>
              <el-form-item label="单位名称">
                <el-input v-model="formInline.orgName" disabled></el-input>
              </el-form-item>
              <el-form-item label="座机号：">
                <el-input v-model="formInline.orgLandline"></el-input>
              </el-form-item>
              <el-form-item label="DT(登录名)：">
                <el-input v-model="formInline.userName" disabled></el-input>
              </el-form-item>
              <el-form-item label="地址：">
                <el-input v-model="formInline.orgAddr"></el-input>
              </el-form-item>
              <el-form-item label="机要员：">
                <el-input v-model="formInline.nickName" disabled></el-input>
              </el-form-item>

            </div>
            <div class="box_right">
              <el-form-item label="营业执照登记机构：">
                <el-input v-model="formInline.orgBlrOrg" disabled></el-input>
              </el-form-item>
              <el-form-item label="成立日期：">
                <el-input v-model="formInline.orgEstablishDate" disabled></el-input>
              </el-form-item>

              <el-form-item label="传真：">
                <el-input v-model="formInline.orgFax"></el-input>
              </el-form-item>
              <el-form-item label="手机号：">
                <el-input v-model="formInline.orgTel"></el-input>
              </el-form-item>
              <el-form-item label="24小时电话：">
                <el-input v-model="formInline.rescuePhone"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onSave" type="primary" size="mini">保 存</el-button>
        <el-button @click="dialogFormVisible1 = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@/libs/util'
import { getUploadFile } from '@/api/public'
import { getOrgBaseInfo, editPersonCharge, editMaintOrgInfo } from '@/api/orglist'
export default {
  data () {
    return {
      util: util,
      imageUrl: '',
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form: {
      },
      formInline: {},
      dialogFormVisible1: false,
      regInfo: {},//登记信息
      contactInfo: {},//联系信息,
      fileList: [],
      keyWorkerInfo: {
        generalManager: {
          url: '',
          photo: ''
        },
        maintCharge: {},
        qualityCharge: {},
        techCharge: {},
        installCharge: {},
        notifyCharge: {}
      }//主要负责人
    }
  },
  methods: {
    onCancle () {
      this.dialogFormVisible = false
      this.fileList = [],
        this.form = {}
    },
    // 上传最多一个
    handleExceedone () {
      this.$message.error("最多只能上传1个图片")
      return false
    },
    uploadFlie (file, fileList) {
      const isJPG =
        file.raw.type === "image/gif" ||
        file.raw.type === "image/jpg" ||
        file.raw.type === "image/png" ||
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/bmp"
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        fileList.splice(fileList.length - 1, 1)
        return this.$message.error("上传图片只能是jpg,jpeg,png,gif,bmp格式!")
      } else if (!isLt1M) {
        fileList.splice(fileList.length - 1, 1)
        return this.$message.error("上传图片大小不能超过 1MB!")
      } else {
        let formData = new FormData()
        formData.append("file", file.raw)
        formData.append("bucketName", "avatar")
        getUploadFile(formData)
          .then((res) => {
            if (res.data.code == 200) {
              this.form.photo = res.data.data.id.toString()
              this.$message({
                type: "success",
                message: "照片上传成功",
              })
              this.fileList = fileList
              console.log(this.fileList)
              this.$forceUpdate()
            } else {
              fileList.splice(fileList.length - 1, 1)
              this.$message.error({
                message: res.data.msg,
              })
            }
          })
          .catch(() => {
            fileList.splice(fileList.length - 1, 1)
          })
      }
    },
    removeFile (file) {
      this.fileList = []
    },
    onSave () {
      let userinfo = JSON.parse(localStorage['userInfo'])
      this.formInline.administratorsUserId = userinfo.userId
      const query = this.formInline
      editMaintOrgInfo(query).then(res => {
        console.log(res)
        if (res.data.code == '200') {
          this.getCompanyInfo()
          this.dialogFormVisible1 = false
        } else {
          this.$message({
            type: 'warning',
            message: res.data.msg
          })
        }
      })

    },
    showDailog (e, type) {
      console.log(e, type)
      let params = JSON.parse(JSON.stringify(e))
      this.form = params
      this.form.orgMaintInfoId = this.regInfo.orgMaintInfoId
      if (type == '管理者代表') {
        this.form.personType = '管理者代表'
        if (this.form.photo.length != 0) {
          const url = util.fileIP + params.url
          this.fileList.push({ ...params, url: url })
        }
      } else if (type == '维保负责人') {
        this.form.personType = '维保负责人'
        if (this.form.photo.length != 0) {
          const url = util.fileIP + params.url
          this.fileList.push({ ...params, url: url })
        }
      }
      else if (type == '质保负责人') {
        this.form.personType = '质保负责人'
        if (this.form.photo.length != 0) {
          const url = util.fileIP + params.url
          this.fileList.push({ ...params, url: url })
        }
      }
      else if (type == '技术负责人') {
        this.form.personType = '技术负责人'
        if (this.form.photo.length != 0) {
          const url = util.fileIP + params.url
          this.fileList.push({ ...params, url: url })
        }
      }
      else if (type == '施工负责人') {
        this.form.personType = '施工负责人'
        if (this.form.photo.length != 0) {
          const url = util.fileIP + params.url
          this.fileList.push({ ...params, url: url })
        }
      }
      else {
        this.form.personType = '开工告示指定人'
        if (this.form.photo.length != 0) {
          const url = util.fileIP + params.url
          this.fileList.push({ ...params, url: url })
        }
      }
      this.dialogFormVisible = true
    },
    async getSave () {
      const res = await editPersonCharge(this.form)
      if (res.data.code == '200') {
        this.onCancle()
        this.getCompanyInfo()
        let that = this
        setTimeout(function () {
          that.dialogFormVisible = false
        }, 500)

      } else {
        this.$message({
          type: 'warning',
          message: res.data.msg
        })
      }
    },
    // 获取公司信息
    getCompanyInfo () {
      getOrgBaseInfo().then(res => {
        if (res.data.code == '200') {
          this.regInfo = res.data.data.regInfo
          this.contactInfo = res.data.data.contactInfo
          this.keyWorkerInfo = res.data.data.keyWorkerInfo
        }
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    gotoedit (regInfo, contactInfo) {
      this.dialogFormVisible1 = true
      this.formInline = { ...regInfo, ...contactInfo }
    }
  },
  mounted () {
    this.getCompanyInfo()
  }
}

</script>

<style lang="less" scoped>
.el-dailog {
  .box_left {
    width: 60%;
  }
  .box_right {
    width: 40%;
  }
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-card__header {
  background: #f9f9f9;
}
::v-deep .el-card__header {
  padding: 10px 20px;
}
.baseinfo {
  width: 100%;
  padding-top: 0;
  .info {
    display: flex;
    justify-content: space-between;

    ::v-deep .el-card__body {
      padding: 0 20px 10px 20px;
    }
    .box-card {
      width: 49%;
      .clearfix {
        color: #716d6d;
        font-weight: bold;
      }
      .p {
        padding: 5px;
        font-size: 13px;
        border-bottom: 1px solid #e7eaec;
        span:first-child {
          font-weight: bold;
          display: inline-block;
          width: 38%;
          text-align: right;
          padding-right: 10px;
        }
        span:last-child {
          display: inline-block;
          width: 62%;
        }
      }
    }
  }
  .main {
    margin-top: 15px;
    ::v-deep .el-card__body {
      padding: 10px 20px;
    }
    .clearfix {
      color: #716d6d;
      font-weight: bold;
    }
    .big-box {
      display: flex;
      flex-direction: column;
      .first {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-around;
      }
      .second {
        display: flex;
        justify-content: space-around;
      }
      .box {
        img {
          width: 100px;
          height: 100px;
        }
        width: 32%;
        padding: 10px;
        display: flex;
        border: 1px solid #e7eaec;
        .info {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          p {
            font-size: 14px;
            line-height: 20px;
            white-space: nowrap;
            .job {
              font-weight: bold;
            }
            span {
              margin-left: 10px;
            }
          }
          .el-button {
            width: 60px;
          }
        }
      }
    }
  }
}
::v-deep .delUploadColor {
  .el-upload--picture-card {
    display: none;
  }
  i.el-icon-plus {
    display: none;
  }
}
</style>
